<template>
  <div class="my-daily" name="myDaily">
    <div class="title">我的任务</div>
    <div class="demo-collapse" v-if="total">
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, key) in tableList" :key="key" :title="item.label" :name="key">
          <div v-if="item?.list?.length">
            <div class="collapse-cot" v-for="(task, taskKey) in item.list" :key="taskKey">
              <div class="tit">{{ task.name }}</div>
              <div class="status">
                <div class="project-name">
                  <el-icon><Notebook /></el-icon>
                  <span>{{ task.projectName }}</span>
                </div>
                <span class="status-name" :style="`background: ${taskStatusColor(task.status)}`">{{
                  conversionDisplay(task.status, dict["taskStatus"])
                }}</span>
                <span class="status-time">
                  {{ task.planStartTime ? dayjs(task.planStartTime).format("YYYY.MM.DD") : "--" }}~{{
                    task.planEndTime ? dayjs(task.planEndTime).format("YYYY.MM.DD") : "--"
                  }}
                </span>
              </div>
            </div>
          </div>
          <div v-else class="collapse-cot">暂无数据</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-else class="demo-collapse">
      <el-empty></el-empty>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, reactive, getCurrentInstance } from "vue";
import { myTaskApi } from "@/api/modules/home";
import { getParamByParentIdList } from "@/api/modules/sys"; // exportUserInfo,BatchAddUser
import { useUserStore } from "@/stores/modules/user";
import dayjs from "dayjs";

const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;
let dictList: Dict.ResDictList = reactive({});
const userStore = useUserStore();
const userId = computed(() => userStore.userInfo.id);
// 方法
const taskStatusColor = (val: string) => {
  switch (val) {
    case "1790295339517870080": // 未开始
      return "#999999 ";
    case "1790295366042648576": // 进行中
      return "#5378F6";
    case "1790295395008512000": // 搁置中
      return "#F65353";
    case "1790295418777632768": // 已完成
      return "#74D98C";
  }
};

// 获取字典数据
const getDicList = async (params: Dict.ResDictList) => {
  const { data } = await getParamByParentIdList(params);
  return data || [];
};
// 查询列表数据
const tableList = ref([
  {
    key: "delayTasks",
    label: "延期"
  },
  {
    key: "todayTasks",
    label: "今日"
  },
  {
    key: "weekTasks",
    label: "本周"
  },
  {
    key: "monthTasks",
    label: "本月"
  },
  {
    key: "otherTasks",
    label: "其他"
  }
]);
// 总计条数
const total = ref(0);

const getTableList = async () => {
  const list: string[] = [dict.taskStatus];
  dictList = await getDicList({ parentIdList: list.join(",") });
  const { data } = await myTaskApi({ userId: userId.value });
  tableList.value = tableList.value.map(item => ({
    ...item,
    list: data.projectTaskModelMap[item.key]
  }));
  tableList.value = tableList.value.filter(item => item.list.length);
  total.value = tableList.value.reduce((init, item) => (init = init + item.list.length), 0);
};

// 转换显示
const conversionDisplay = (id: string, type: string) => {
  const listItem = dictList[type]?.find(item => item.id === id);
  return listItem?.name;
};

const activeNames = ref([0, 1, 2, 3, 4]);

onMounted(() => {
  getTableList();
});
</script>
<style scoped lang="scss">
.my-daily {
  box-sizing: border-box;
  display: flex;

  // flex: 1;
  flex-flow: column nowrap;
  padding: 0 30px 18px;
  background-color: #ffffff;

  // height: 90%;
  .title {
    box-sizing: border-box;
    flex: 0 0 72px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 72px;
    color: #333333;
    text-align: left;
    background: #ffffff;
  }

  // .demo-collapse {
  //   width: 100%;
  //   min-height: 320px;
  // }
  // .el-collapse {
  //   --el-collapse-header-height: 64px;
  //   --el-collapse-header-font-size: 14px;
  //   --el-collapse-header-text-color: #666666;
  //   :deep(.el-collapse-item__header) {
  //     padding: 0 30px;
  //   }
  //   :deep(.el-collapse-item__content) {
  //     padding-bottom: 0;
  //   }
  // }
  .demo-collapse {
    width: 100%;
    min-height: 320px;
  }
  .el-collapse {
    --el-collapse-header-height: 64px;
    --el-collapse-header-font-size: 14px;
    --el-collapse-header-text-color: #666666;
    :deep(.el-collapse-item__header) {
      padding: 0 30px;
    }
    :deep(.el-collapse-item__content) {
      padding-bottom: 0;
    }
  }
  .el-collapse-item {
    box-sizing: border-box;
  }
  .collapse-cot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: border-box;
    height: 64px;
    padding: 0 20px 0 56px;
    line-height: 64px;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    .tit {
      flex: 1;
      margin-right: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status {
      display: flex;
      flex: 0 0 480px;
      align-items: center;
      justify-content: flex-end;
      .project-name {
        display: flex;
        align-items: center;
        span:last-child {
          width: 130px;
          margin-left: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .status-time {
        margin-left: 40px;
      }
      .status-name {
        height: 24px;
        padding: 0 18px;
        margin-left: 40px;
        font-size: 12px;
        line-height: 24px;
        color: #ffffff;
        background: #f8d27c;
        border-radius: 14px;
      }
    }
  }
}
</style>
